{% extends 'layout.html' %}
{% block form-index %}nav-link{% endblock %}
{% block form-show %}show{% endblock %}
{% block form-index-ginkgoBiloba %}active{% endblock %}
{% block body %}
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
   <main id="main" class="main">

     {% if error %}
        <script>
        document.addEventListener('DOMContentLoaded', function() {
            var errorMessages = [{% for item in error %}'{{item}}'{% if not last.loop %},{% endif %}{% endfor %}];
            var allMessages = errorMessages.join('\n'); // 使用换行符分隔每个消息
            alert(allMessages);
        });
        </script>
    {% endif %}

    <div class="pagetitle">
      <h1>银杏树种计算工具</h1>
      <nav>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{% url 'index' %}">主页</a></li>
          <li class="breadcrumb-item">工具箱</li>
          <li class="breadcrumb-item active">银杏树种计算工具</li>
        </ol>
      </nav>
    </div><!-- End Page Title -->
    <section class="section">
      <div class="row">
        <div class="col-lg-6">

          <div class="card">
            <div class="card-body">
              <h5 class="card-title">测试样例</h5>

              <!-- Multi Columns Form -->
              <form class="row g-3" method="post">
                <div class="col-md-12">
                  <label for="inputCommit" class="form-label">备注</label>
                  <input type="text" class="form-control" id="inputCommit" name="inputCommit">
                </div>

                <div class="col-md-4">
                  <label for="inputTree" class="form-label">树种</label>
                  <select id="inputTree" class="form-select" name='inputTree'>
                    <option selected>...</option>
                    <option value="杨树" >杨树</option>
                  </select>
                </div>

                <div class="col-md-4">
                  <label for="inputProvince" class="form-label">省份</label>
                  <select id="inputProvince" class="form-select" name="inputProvince">
                      <option selected >...</option>
                    {% for item in province %}
                      <option value="{{item.0}}">{{item.1}}</option>
                    {% endfor %}
                  </select>
                </div>

                <div class="col-md-4">
                  <label for="inputCity" class="form-label">城市</label>
                  <select id="inputCity" class="form-select" name="inputCity">
                    <option selected>...</option>
                    <option>...</option>
                  </select>
                </div>

                <div class="col-4">
                  <label for="Height" class="form-label">树高</label>
                  <input type="number" class="form-control" id="Height" placeholder="输入树高" value=0 name="Height">
                </div>

                <div class="col-4">
                  <label for="Diameter" class="form-label">树径</label>
                  <input type="number" class="form-control" id="Diameter" placeholder="输入树径" value=0 name="Diameter">
                </div>

                <div class="col-4">
                  <label for="Quantity" class="form-label">数量</label>
                  <input type="number" class="form-control" id="Quantity" placeholder="输入数量" value=0 name="Quantity">
                </div>

                <div class="col-12">
                  <label for="inputAddress" class="form-label">地址</label>
                  <input type="text" class="form-control" id="inputAddress" placeholder="地点" name="Pos" >
                </div>

                <div class="col-12">
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" id="gridCheck">
                    <label class="form-check-label" for="gridCheck">
                      Check me out
                    </label>
                  </div>
                </div>

                <div class="text-center">
                  <button type="submit" class="btn btn-primary">提交</button>
                  <button type="reset" class="btn btn-secondary">重置</button>
                </div>
              </form><!-- End Multi Columns Form -->

               <script>
                  $(document).ready(function() {
                    $('#inputProvince').change(function() {
                      var province_id = $(this).val();
                      $.ajax({
                        url: '{% url "unary" %}',
                        type: 'POST',
                        data: {
                            'province_id':province_id,
                        },
                        success: function(data) {
                            $('#inputCity').empty();
                            $('#inputCity').append('<option value="...">...</option>');
                            $.each(data.cityLog, function(key, city) {
                                $('#inputCity').append('<option value="' + city + '">' + city + '</option>');
                            });
                        },
                        error: function(xhr, status, error) {
                            console.error("Error: " + error);
                        }
                    });
                    });
                  });
              </script>

            </div>
          </div>

        </div>

        <div class="col-lg-6">
            <div class="card">
            <div class="card-body">
              <h5 class="card-title">Default Table</h5>

              <!-- Default Table -->
              <table class="table">
                <thead>
                  <tr>
                    <th scope="col">id</th>
                    <th scope="col">项目</th>
                    <th scope="col">数据</th>
                    <th scope="col">单位</th>

                  </tr>
                </thead>

                <tbody>
                   <tr>
                    <th scope="row">1</th>
                    <td>备注</td>
                    <td>{{Commit}}</td>
                    <td>NAN</td>
                  </tr>

                   <tr>
                    <th scope="row">2</th>
                    <td>地区</td>
                    <td>{{Province}}-{{City}}-{{Pos}}</td>
                    <td>NAN</td>
                  </tr>

                  <tr>
                    <th scope="row">3</th>
                    <td>树种</td>
                    <td>{{Item.TreeType}}</td>
                    <td>NAN</td>
                  </tr>

                  <tr>
                    <th scope="row">4</th>
                    <td>树径</td>
                    <td>{{Item.Diameter}}</td>
                    <td>cm</td>
                  </tr>
                  <tr>
                    <th scope="row">5</th>
                    <td>树高</td>
                    <td>{{Item.Height}}</td>
                    <td>cm</td>
                  </tr>
                  <tr>
                    <th scope="row">6</th>
                    <td>干材生物量</td>
                    <td>{{Item.dry_biomass}}</td>
                    <td>t</td>
                  </tr>
                  <tr>
                    <th scope="row">7</th>
                    <td>全树生物量</td>
                    <td>{{Item.total_biomass}}</td>
                    <td>t</td>
                  </tr>
                  <tr>
                    <th scope="row">8</th>
                    <td>重复数的生物量</td>
                    <td>{{Item.total_biomass_repeated}}</td>
                    <td>t</td>
                  </tr>
                  <tr>
                    <th scope="row">9</th>
                    <td>碳库量</td>
                    <td>{{Item.carbon_storage}}</td>
                    <td>tC</td>
                  </tr>
                  <tr>
                    <th scope="row">10</th>
                    <td>总碳库量</td>
                    <td>{{Item.total_carbon_storage_all}}</td>
                    <td>tC</td>
                  </tr>
                  <tr>
                    <th scope="row">11</th>
                    <td>碳汇</td>
                    <td>{{Item.carbon_sinks}}</td>
                    <td>tC</td>
                  </tr>
                  <tr>
                    <th scope="row">12</th>
                    <td>总碳汇</td>
                    <td>{{Item.total_carbon_sinks}}</td>
                    <td>tC</td>
                  </tr>
                </tbody>
              </table>
              <!-- End Default Table Example -->
            </div>
          </div>


        </div>
      </div>
    </section>



  </main><!-- End #main -->
{% endblock %}